<template>
  <div class="wy-main business-car wei_tendering">
      <a-row class="wy-main-title">
           <a-col :span="24">
               <p class="title-p">
                   <a-divider class="title-vertical"  type="vertical" />
          <span class="title-span" >发布农产品供应信息</span>
          <a-divider class="title-divider"  />
               </p>
           </a-col>
       </a-row>
      <a-form :form="form" @submit="handleSubmit" class="wy-form">
          <a-form-item class="wy-form-item" :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="农产品供应主题">
        <a-input  :disabled='disabled' class="wy-input" v-decorator="[ 'subject', {rules: [{ required: true , message: '请输入农产品供应主题!'}]}]"   maxLength="50" placeholder="请输入农产品供应主题" />
      </a-form-item>

          <a-form-item class="wy-form-item" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="农产品类型">
        <a-select  :disabled='disabled' v-decorator="[ 'type', {rules: [{ required: true, message: '请选择农产品类型!' }]} ]" style="width: 280px;" placeholder="请选择农产品类型">
          <a-select-option v-for="(itme,index) in agriList" :key="index" :value="itme.dictKey">
            {{itme.dictValue}}
          </a-select-option>
        </a-select>
      </a-form-item>

            <a-form-item class="wy-form-item" :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="农产品名称">
        <a-input  :disabled='disabled' class="wy-input" v-decorator="[ 'name', {rules: [{ required: true , message: '请输入农产品名称!'}]}]"  placeholder='请输入农产品名称' maxLength="50" />
        </a-form-item>

        <a-form-item class="wy-form-item" :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="供应周期">
        <a-input  :disabled='disabled' class="wy-input" type="number" v-decorator="[ 'cycleStart', {rules: [{ required: true , message: '请输入起始月!'}]}]" style="width:40%;margin-right:1.5%;"  placeholder='请输入起始月' maxLength="50" />
        <a-input  :disabled='disabled' class="wy-input" v-decorator="[ 'cycleEnd', {rules: [{ required: true , message: '请输入结束月!'}]}]" style="width:40%;"   placeholder='请输入结束月' maxLength="50" />
        </a-form-item>

            <a-form-item class="wy-form-item" :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="产地">
        <a-input  :disabled='disabled' @click="departureShowMap" v-decorator="[ 'producePlace', {rules: [{ required: true, message: '请选择农产品产地!' }]}]" placeholder='请选择农产品产地' ref="userNameInput">
          <a-icon type="environment" slot="suffix" style="color: #15837A;" />
        </a-input>
      </a-form-item>
  

            <a-form-item class="wy-form-item " :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="供应价格">
        <a-input  :disabled="disabled"  placeholder='请输入供应价格'  style="width: 175px" v-decorator="[ 'price', {rules: [{ required: true, message: '请输入供应价格!' }]}]" />
        <a-select  v-decorator="[ 'priceUnit', {rules: [{ required: true, message: '请选择农产品产地!' }]}]" style="width: 95px; margin-left:10px" class="gongjin">
          <a-select-option v-for="(itme,index) in priceList" :key="index" :value="itme.dictKey">
            {{itme.dictValue}}
          </a-select-option>
        </a-select>
      </a-form-item>
            <a-form-item class="wy-form-item " :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="供应数量">
        <a-input  :disabled="disabled"  placeholder='请输入供应数量'  style="width: 175px" v-decorator="[ 'number', {rules: [{ required: true, message: '请输入供应数量!' }]}]" />
        <a-select  v-decorator="[ 'numberUnit', {rules: [{ required: true, message: '请选择农产品产地!' }]}]" style="width: 95px; margin-left:10px" class="gongjin">
                 <a-select-option v-for="(itme,index) in numList" :key="index" :value="itme.dictKey">
                    {{itme.dictValue}}
                  </a-select-option>
                </a-select>
      </a-form-item>
                  <a-form-item class="wy-form-item " :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="最低起订量">
        <a-input  :disabled="disabled"  placeholder='请输入最低起订量'  style="width: 175px" v-decorator="[ 'minNumber', {rules: [{ required: true, message: '请输入最低起订量!' }]}]" />
        <a-select  v-decorator="[ 'minNumberUnit', {rules: [{ required: true, message: '请选择农产品产地!' }]}]" style="width: 95px; margin-left:10px" class="gongjin">
                 <a-select-option v-for="(itme,index) in numList" :key="index" :value="itme.dictKey">
                    {{itme.dictValue}}
                  </a-select-option>
                </a-select>
      </a-form-item>     
            <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="上传图片" class="upzjimg" >
        <a-form-item class="up_img">
          <a-upload v-decorator="[ 'upload1', {rules: [{ required: true, message: '请上传图片!' }]}]" name="file" :multiple="true" listType="picture-card"  class="avatar-uploader" :showUploadList="false" :action="uploadUrl" :beforeUpload="beforeUpload" @change="img_Change">
          <div v-if="picList.length" v-for="(item,index) in picList" :key="index">
            <div class="img_zz" >
              <div class="img_zz_text" v-if="index==0">
                <a-icon style="font-size: 30px;" :type="upload1_loading ? 'loading' : 'plus'" />
                <div class="ant-upload-text" style="margin-top: 10px;">
                  <span style="color: red;"></span>
                </div>
              </div>
              <div class="img_zz_d"></div>
            </div>
            <img style="margin-bottom:20px;"  v-if="item.img" :src="item.img" alt="avatar" />
          </div>
            <div class="up_img_d" v-if="!picList.length">
              <a-icon style="font-size: 30px;" :type="upload1_loading ? 'loading' : 'plus'" />
              <div class="ant-upload-text" style="margin-top: 10px;">
                <span style="color: red;">*必填：</span>图片
              </div>
            </div>
          </a-upload>
        </a-form-item>
      </a-form-item>
      <a-form-item class="wy-form-item" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }" label="供应说明" >
        <a-textarea  :disabled='disabled' placeholder="请填写说明" style="margin-top: 10px; width: 447px;height:173px;" :rows="4" v-decorator="[ 'description', {rules: [{ required: true, message: '请填写说明!' }]}]" />
      </a-form-item>
            <a-form-item class="wy-form-item" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="有效期" style="margin-top: 26px">
        <a-input v-decorator="[ 'validityTerm', {rules: [{ required: true, message: '请输入有效期!' }]}]"  :disabled='disabled' placeholder='请输入有效期' /><b style="margin-left: 5px;">（天）</b>
      </a-form-item>
            <a-divider class="title-divider"  />
      <div class="route_choice wy-form-item">
      <p><b>联系方式</b></p>
          <a-form-item class="wy-form-item " :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }" label="联系人">
              <a-input readOnly :disabled="disabled"  placeholder='请输入联系人'   style="width: 175px"  v-model="users.username"/>
              <span style="margin-left:25px; margin-right:10px;"> 联系人手机号：</span><a-input readOnly  placeholder='请输入联系人手机号' :disabled="disabled"  v-model="users.mobile" />
          </a-form-item>
          <a-form-item class="wy-form-item " :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }" label="邮箱">
              <a-input readOnly  :disabled="disabled"  placeholder='请输入邮箱'  style="width: 175px" v-model="users.email" />
              <span style="margin-left:75px; margin-right:10px;"> QQ号：</span><a-input readOnly :disabled="disabled" v-model="users.qq" placeholder='请输入qq号码' />
          </a-form-item>
          <a-form-item class="wy-form-item " :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }" label="详细地址">
              <a-input readOnly :disabled="disabled" style="width:592px"  v-model="users.address"  placeholder='请输入详细地址' />
          </a-form-item>
      </div>
            <a-divider class="title-divider"  />
      <!--我已阅读-->
      <div class="ant-row ant-form-item"  v-if='types!="add"'>
        <div class="ant-col-4 ant-form-item-label"></div>
        <div class="ant-col-20 ant-form-item-control-wrapper">
          <div class="ant-form-item-control">
            <span class="ant-form-item-children">
              <a-checkbox v-model="agreement" >
                我已阅读并接受<a href="javascript:;" @click="userShow=true">《云南国际物流云用户协议》</a><a href="javascript:;" @click="webShow=true">《用户信息发布协议》</a>
              </a-checkbox>
            </span>
          </div>
        </div>
      </div>

    <div class="ant-row ant-form-item" v-if='types!="add"'>
      <div class="ant-col-4 ant-form-item-label"></div>
        <div class="ant-col-10 ant-form-item-control-wrapper">
          <div class="ant-form-item-control">
            <span class="ant-form-item-children">
              <a-button type="primary" :disabled = '!agreement' html-type="submit" style="width: 300px;height:50px;margin-top: -10px;" >
                {{types == 'add' ? '关闭':'提交审核并发布'}}
              </a-button>
            </span>
          </div>
        </div>
    </div>
      </a-form>

    <map-svg ref="mapSvgDialog" @change="mapSvgCall" ></map-svg>

    <a-modal  :visible="webShow" @cancel="close" width="900px"  :maskClosable='false' :footer="null">
      <web @close="close" v-if="webShow" @cancel="close"></web>
    </a-modal>
    <a-modal  :visible="userShow" @cancel="close" width="900px"  :maskClosable='false' :footer="null">
      <user @close="close" v-if="userShow" @cancel="close"></user>
    </a-modal>
   
  </div>

    
</template>
<script>
import MapSvg from '@/components/dialog/MapSvg'
import { mapState } from 'vuex'
import Web from '@/components/tool/web'
import User from '@/components/tool/user'
import { environment } from '@/environments/environment'
export default {
    components: {
        MapSvg,
    Web,
    User
    },
    props: ['datail','types','isSee'],
    data(){
        return {
      disabled:false,
      agreement:false,
      picList:[],//上传图片列表
      up_img:'',
      upload1_loading: false,
      uploadUrl: environment.FileUploadUrl+'/fileupload/batch/upload',// 图片上传地址

      FileUploadUrl2:environment.FileUploadUrl2,
      webShow:false,
      userShow:false,
      users:{},
      remarks:'',//备注
      agriList:[],
      priceList:[],
      numList:[],
      // 地图存起止数据
      departureData: {},
    }
  },
  created() {
    this.getType(28)
    this.getType(36)
    this.getType(1)
    if(this.isSee){
      this.disabled = true
    }else{
      this.disabled = false
    }
      this.users = this.$store.state.account.user;
    if(this.datail){
      let d = this.datail
      console.log(this.types)
    }
    },
    beforeCreate() {
    this.form = this.$form.createForm(this);
  },
      computed: {
    ...mapState(['setUser'])
    },
  methods: {
    // 获取字典类型
      getType(type){
        this.$get('/info/commonDict', {
          dictType: type
        }).then((r) => {
          if(type == 3){
            console.log(r)
          }
          switch(type){
            case 28: this.agriList = r.data.data.rows; break;
            case 36: 
            this.priceList = r.data.data.rows;
              setTimeout(()=>{
                this.form.setFieldsValue({
                  priceUnit:this.priceList[0].dictKey
                });
              },0) 
             break;
            case 1: 
            this.numList = r.data.data.rows;
              setTimeout(()=>{
                this.form.setFieldsValue({
                  minNumberUnit:this.numList[0].dictKey,
                  numberUnit:this.numList[0].dictKey
                });
              },0) 
             break;
          }
        })
      },

          // 上传图片
      img_Change(info){
        if(info.file.status === 'uploading') {
          this.upload1_loading = true
          return
        }
        if(info.file.status === 'done') {
          this.picList.push({
            img:this.FileUploadUrl2+info.file.response.data.certifJpgFile,
            imgUp:info.file.response.data.certifJpgFile
          })

          this.upload1_loading = false
        }
      },
          // 上传前事件
      beforeUpload(file) {
        const isJPG = file.type === 'image/jpeg' || 'image/png'
        if(!isJPG) {
          this.$message.error('You can only upload JPG file!')
        }
        const isLt2M = file.size / 1024 / 1024 < 2
        if(!isLt2M) {
          this.$message.error('Image must smaller than 2MB!')
        }
        return isJPG && isLt2M
      },
    close() {
      this.webShow = false
      this.userShow = false

    },
            /* 省市地图代码 start */
      // 省市地图回调
      mapSvgCall(d) {
        if(d.name === 'departure') {
          this.form.setFieldsValue({
            producePlace : d.provCityArea
          });
          this.departureData = Object.assign({}, d);
        }
      },
      departureShowMap() {
        this.$refs.mapSvgDialog.mapSvgVisible('departure', 2, '', '', '');
      },
        // 认证提交
      handleSubmit(e) {
        e.preventDefault();
       
        this.form.validateFieldsAndScroll((err, values) => {
          if(!err) {
          //  values.number = parseInt(values.number);
         
           
            if (this.types === 'edit') {
              this.editSubmit(values)
            }else{
              this.addSubmit(values)
            }
          }
        });
      },
      // 添加保存数据
      addSubmit(values){
       let arr =[];
        if(this.picList){
          for(var i=0;i<this.picList.length;i++){
           arr.push(this.picList[i].imgUp)
          }
          values.imgPaths = arr.join(',')
          console.log(values.imgPaths)
        }

        this.$post('/info/agricultureSupply', values,true).then((r) => {
          console.log(r,8989)
          if(r.status == 200){
            this.$message.success(r.data.message)
            this.form.resetFields();
            this.agreement = false;
            this.picList = ''
          }
          this.loading = false;
        }).catch((e) => {
          console.log(e)
          this.$message.error(e)
          this.loading = false;
        })
      },
      // 编辑修改数据
      editSubmit(values){
        values.driverId = this.datail.driverId;
        this.$put('info/infoDriver', values,true).then((r) => {
          console.log(r,8989)
          if(r.status == 200){
            this.$message.success(r.data.message)
            this.$emit('close');
          }
        }).catch((e) => {
          console.log(e)
          this.$message.error(e)
        })
      },
            
       },   

        }



</script>
<style lang="less">
    .car-label {
      margin-top: 10px;
      span {
        border: 1px solid #15837A;
        width: 100px;
        height: 40px;
        border-radius: 2px;
        text-align: center;
        line-height: 36px;
        font-size: 14px;
        display: inline-block;
        margin-right: 30px;
        margin-bottom: 20px;
      }
      .active {
        background: #15837A;
        color: #fff;
      }
      .span:first-child {
        margin-left: 0;
      }
      span,
      span:hover {
        cursor: pointer;
      }
        }
        .gongjin{
            .ant-select-selection{
            width:90px !important;
        }
        .ant-select-selection-selected-value{
            padding-right:0px;
        }

        }
        .route_choice {
      
        
      margin-top: 10px;
     
    padding-bottom: 10px;
        width:90% ;
        p{
            margin-left: 85px;
        }
    b{
      color: #333333;
      font-size: 16px;
    }
    width: 100%;
        }
        .time{
      .ant-calendar-picker{
        width:120px !important;;
        
          .ant-calendar-picker-input{
            width:120px !important;;
          }
          .ant-input{
            width:120px !important;;
          }
      
      }
           .wy-form .ant-form-item .ant-input{
         width:120px !important; 
       }
    }
    .ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }
    

 


</style>


